<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../js/vue.js"></script>
    <title>自定义指令</title>

    <!-- 判断是否为真实dom两种方法：
        （1）console.dir(dom元素)，查看是强拆打印的对象属性是否为dom元素的
        （2）console.log(dom元素 instanceof HTMLElemet)，打印看此dom是不是HTMLElement的实例返回true即是真实dom
    -->

    <!-- 
        需求1：定义一个v-big指令，和v-text功能类似，但是会把绑定的数值放大10倍
        需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其绑定的input元素默认获取焦点
    -->
  </head>

  <body>
    <div id="root">
      <h2>初始化的n值{{n}}</h2>
      <h2>
        当前N的值是
        <span v-big="n"></span>
      </h2>
      <button @click="n++">点我N+1</button>
      <hr />
      <input type="text" v-fbind:value="n" />
    </div>
  </body>
  <script>
    new Vue({
      el: '#root',
      data() {
        return {
          n: 10,
        }
      },
      // 自定义指令+“s”
      // 自定义指令两种写法，一种对象，一种是函数
      directives: {
        // big函数何时会被调用？1.指令与元素成功绑定时（一上来）2.指令所在的模板被重新解析时(不单单n改变时，比如另外的插值语法中变化，big也会重新调用)
        big(element, binding) {
          // 自定义标签配置中会返回两个参数：参数一：真实的dom元素。参数二：一个对象携带属性value即我们传入的值
          console.log(element, binding)
          if (typeof binding.value == 'number') {
            element.innerHTML = binding.value * 10
          } else {
            element.innerHTML = binding.value
          }
        },

        // fbind(element, binding) {
        //   element.value = binding.value
        //   element.focus() //为什么执行了，input元素还没有获取焦点？
        //我们上边说过，指令什么时候会被调用，第一种：指令与元素绑定时（一上来），
        //就是这里出的问题
        //我们vue里边写的是模板，并不是真实的dom，所以我们vue中写了，但是不一定调用指令之前dom存在，刚开始就不存在
        //   如何解决？
        //我们一旦写成函数肯定无法解决，所以得写成对象形式如下
        // },

        // 对象形式，常用得三个函数
        fbind: {
          // 指令与元素成功绑定时（一上来）
          bind(element, binding) {
            element.value = binding.value
            console.log('bind')
          },
          //指令所在元素被插入页面时
          inserted(element, binding) {
            element.focus()
            console.log('inserted')
          },
          //   指令所在得模板被重新解析时
          update(element, binding) {
            element.value = binding.value
            element.focus()
            console.log('update')
          },
        },
      },
    })
  </script>
</html>
